<template>
    <div>
        <div class="center navInfo" v-if="storeList.length>0">
        
            <!-- <div @click="changeName" class="fontbold colorfff fontSize16 flex flexCenter alignCenter mt5" style="margin-bottom:0.3rem;">{{storeName}} <span class="arrowSty"></span></div> 
            <div @click="changPrice" class="flex alignCenter flexCenter fontSize14 colorfff" > 
                {{month}}月<span class="arrowSty"></span>
            </div>
            <div class="fontSize12 dw" @click="showPopup">{{originalRemarkVal==''?'添加':'修改'}}备注</div> -->
            <van-dropdown-menu active-color='#4873c1'>
                <van-dropdown-item v-model="storeIndex" :options="storeList" @change='getStoreIndex'/>
                <van-dropdown-item v-model="monthIndex" :options="monthList" @change="getMonthIndex"/>
            </van-dropdown-menu>
        </div>
        <div class="center color666" v-if="storeList.length==0" style="padding-top:4rem">抱歉，您的账号暂无商场~</div>
        <div class="whiteBg contentInfo"  v-if="rankList.length>0">
            <!-- <div class=" fontSize14 color333 fontbold" v-if="rankList.length>0" style="padding:0.2rem 0.4rem;border-bottom: 1px #ddd solid;">填写销售金额（单位:万）</div> -->
            <div class="flex flexBetween title colorfff fontSize14" >
                <div style="width:48%" class="center">品牌名称</div>
                <div style="width:20%" class="center">本月排名</div>
                <div style="width:32%" class="center">金额(万)</div>
            </div>
            <div class="listContent">
                <div class="list whiteBg relative" style="padding-left:3%;padding-right:3%" v-for='(item,index) in rankList' :key="index">
                    <div class="flex content alignCenter wd100">
                        <div class="fontSize15 center" style="width:48%">
                            <span>{{item.brand_name}}</span>
                            <span v-if="item.is_near_store>0" class="colorGreen">{{item.is_near_store==1?'（左）':'（右）'}}</span>
                        </div>
                        <div style="width:20%">
                            <input type="number" placeholder="本月排名" v-model='item.data_month_ranking'  v-if="item.isEditRank" />
                            <div v-if="!item.isEditRank" class="center">{{item.data_month_ranking}}</div>
                        </div>
                        <div class="flex alignCenter flexBetween flexCenter" style="width:32%">
                            <input type="number" v-model='item.performance' v-if="item.isEditPrice" placeholder="输入金额" />
                            <!-- <input type="number" class="mr10" v-model='item.performance' v-if="item.isEdit===true" placeholder="输入金额" /> -->

                            <!-- <span class="fontSize12 colorBlue" @click="gosingleCheck(index,item)" v-if="item.isEdit===true">提交</span> -->

                            <div v-if="!item.isEditPrice" class="center wd100">{{item.performance}}</div>
                            <!-- <div class="fontSize12 color999" @click="showPopup(1)">备注</div> -->
                            <!-- <span class="fontSize12 colorBlue" v-if="item.performance>0&&!item.isEdit" @click="goEdit(index,item)">修改</span> -->
                        </div>
                        <!-- <img src="../assets/image/ljt.png" /> -->
                    </div>
                    <div class="grayBg annualContent mt10" v-if="item.can_year_round">
                        <div class="color999 fontSize13 annualInfo">
                            <div class="mb10">
                                <span>全年排名：</span>
                                <input v-if="!item.isAready" type="number" placeholder="填写排名" v-model="item.year_round_ranking">
                                <span v-else>{{item.year_round_ranking}}</span>
                            </div>
                            <div>
                                <span>全年业绩：</span>
                                <input  v-if="!item.isAready" type="number" placeholder="填写业绩" v-model='item.year_round_performance' />
                                <span v-else>{{item.year_round_performance}}</span>
                                w
                            </div>
                        </div>
                        <div class="pb20 pt20 flex flexCenter fontSize12">
                            <div class="onSameBtn center mr20 color666" @click="goCalcenAnnual">取消</div>
                            <div class="onSameBtn onSaveBox center colorBlue" v-if="item.isAready" @click="goEditAnnual(item,index)">修改</div>
                            <div class="onSameBtn onSaveBox center colorBlue" @click="goSaveAnnual(item)" v-if="!item.isAready">提交</div>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        
        <!-- <div  class="whiteBg" style="width:92%;margin:0.2rem auto;border-radius:0.2rem" v-if="rankList.length>0">
            <div class="color999 fontSize14 flex flexBetween color333" style="padding:0.2rem 0.4rem;border-bottom: 1px #ddd solid;">
                <div class="fontbold">填写活动信息</div>
                <div class="colorBlue" v-if="isActivity" @click='goEditActivity'>修改</div>
            </div>
            <div style="padding:0.2rem 0.4rem">
                <div class="list flex">
                    <div class="mr20 color999">活动时间</div>
                    <div class="flex1" :class="{'color999':activityInfo.activity_time==''}" @click="goChange">{{activityInfo.activity_time==''?'选择时间':activityInfo.activity_time}}</div>
                </div>
                <div class="list flex alignCenter">
                    <span class="mr20 color999">商场活动</span>
                    <input v-if="!isActivity" type="text" placeholder="活动内容" class="flex1 border0"  v-model='activityInfo.self_activity_name' />
                    <span v-else>{{activityInfo.self_activity_name}}</span>
                </div>
            <div class="list flex alignCenter">
                    <span class="mr20 color999">自主活动</span>
                    <input v-if="!isActivity" type="text" placeholder="活动内容" class="flex1 border0" v-model="activityInfo.store_activity_name" />
                    <span v-else>{{activityInfo.store_activity_name}}</span>
                </div>
                <div class="list flex alignCenter">
                    <span class="mr20 color999">销售金额（W）</span>
                    <input v-if="!isActivity" type="number" placeholder="金额" class="flex1 border0"  v-model="activityInfo.sales_amount" />
                    <span v-else>{{activityInfo.sales_amount}}</span>
                </div>
                <div v-if="!isActivity" class="pb20 pt20 flex flexCenter fontSize12">
                    <div class="onSameBtn center mr20 color666" @click='goCancel'>取消</div>
                    <div class="onSameBtn onSaveBox center colorBlue" @click='onSaveActive'>提交</div>
                </div>
            </div>
        </div> -->
        
        <!-- <div class="fontSize12 color999 right tipsTxt" v-if="storeList.length>0">注：填写的金额单位为万</div> -->
        <!-- <van-popup v-model="isWeek" round position="bottom">
            <van-picker
                title="月份"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
            />
        </van-popup>
        <van-popup v-model="isName" round position="bottom">
            <van-picker
                title="店面"
                show-toolbar
                value-key='name'
                :columns="storeList"
                @confirm="onConfirmName"
                @cancel="onCancelName"
                @change="onChangeName"
            />
        </van-popup> -->
        <van-popup v-model="showMask">
            <div>
                <textarea cols="32" rows="8" v-model="remarkVal" maxlength="100"></textarea>
                <div class="flex flexAround addRemark">
                    <van-button type="primary" size="normal" color="#aaa" round @click="cancelMask">取消添加</van-button>
                    <van-button type="info" size="normal" round @click="goAddRemark">确定添加</van-button>
                </div>
            </div>
            
        </van-popup>
        <van-popup v-model="showActivity" style="width:92%;border-radius:0.2rem">
            <div  class="whiteBg relative" style="width:92%;margin:0.2rem auto;border-radius:0.2rem">
                <img src="../assets/image/close.png" class="closeIcon" @click="goClose" />
                <div class="color999 fontSize14 flex flexBetween color333" style="padding:0.2rem 0;border-bottom: 1px #ddd solid;">
                    <div class="fontbold">活动信息</div>
                    <div class="colorBlue" v-if="isActivity" @click='goEditActivity'>修改</div>
                </div>
                <div style="padding:0.2rem 0">
                    <div class="list flex">
                        <div class="mr20 color999">活动时间</div>
                        <div class="flex1" :class="{'color999':activityInfo.activity_time==''}" @click="goChange">{{activityInfo.activity_time==''?'选择时间':activityInfo.activity_time}}</div>
                    </div>
                    <div class="list flex alignCenter">
                        <span class="mr20 color999">商场活动</span>
                        <input v-if="!isActivity" type="text" placeholder="活动内容" class="flex1 border0"  v-model='activityInfo.store_activity_name' />
                        <span v-else>{{activityInfo.store_activity_name}}</span>
                    </div>
                <div class="list flex alignCenter">
                        <span class="mr20 color999">自主活动</span>
                        <input v-if="!isActivity" type="text" placeholder="活动内容" class="flex1 border0" v-model="activityInfo.self_activity_name" />
                        <span v-else>{{activityInfo.self_activity_name}}</span>
                    </div>
                    <div class="list flex alignCenter">
                        <span class="mr20 color999">销售金额（W）</span>
                        <input v-if="!isActivity" type="number" placeholder="金额" class="flex1 border0"  v-model="activityInfo.sales_amount" />
                        <span v-else>{{activityInfo.sales_amount}}</span>
                    </div>
                    <div v-if="!isActivity" class="pb20 pt20 flex flexCenter fontSize12">
                        <div class="onSameBtn center mr20 color666" @click='goCancel'>取消</div>
                        <div class="onSameBtn onSaveBox center colorBlue" @click='onSaveActive'>提交</div>
                    </div>
                </div>
            </div>
            
        </van-popup>
        <van-calendar v-model="isShowTime" type="range" :min-date="minDate" :max-date="maxDate" color="#4873c1" @confirm="onActivityConfirm" />
        <div class="flex flexAround operateLayout"  v-if="rankList.length>0">
            <div class="sameBtn cancelBtn whiteBg" @click="goEdit">{{isEdit?'取消':'修改'}}</div>
            <div class="sameBtn saveBtn colorfff" @click="goSubmit">提交</div>
        </div>
         <div class="otherBtn fontSize13 color666"  v-if="rankList.length>0">
            <!-- <div class="circleSty center flex flexColumn flexCenter alignCenter mb20"  @click="showPopup(1)">
                <img src="../assets/image/remark.png" />
                <div>备注</div>
            </div> -->
            <div class="circleSty center flex flexColumn flexCenter alignCenter" @click="showPopup(2)">
                <img src="../assets/image/active.png" alt="">
                <div> 活动</div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog  } from 'vant'
export default {
    name:'pictureList',
    data(){
        return {
            showMask:false,
            remarkVal:'',
            originalRemarkVal:'',
            columns:[],
            isWeek:false,
            checked:false,
            month:0,
            shopMallInfo:{},
            rankList:[],
            saveList:[],
            storeList:[],
            isName:false,
            storeId:'',
            storeName:'',
            storeIndex:0,
            isShowTime:false,
            activityInfo:{
                activity_time:'',
                self_activity_name:'',
                store_activity_name:'',
                sales_amount:''
            },
            isActivity:false,//是否有活动内容
            minDate:'',
            maxDate:'',
            value: 0,
            monthList:[],
            monthIndex:0,
            showActivity:false,
            isEdit:false
        }
    },
    created(){
        let token=this.GetQueryString('token')
        console.log('token---------',token)
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }

        var date = new Date();
        console.log('date',date)
        this.month=date.getMonth(); 
        if(this.month==0){
            this.month=12
        }
        console.log(' this.month', this.month)
        for(let i=0;i<this.month;i++){
            let month=i+1
            let obj={
                text:month+'月',
                value:i
            }
            this.monthList.push(obj)
            // this.columns.push(month)
            
        }
        this.monthIndex=this.monthList[this.monthList.length-1].value
        console.log('monthList',this.monthList)
        this.minDate=new Date(2021, this.month, date.getDate())
        this.maxDate=new Date(2024, this.month, date.getDate())
        // for(let i=0;i<this.month;i++){
        //     let month=i+1
        //     let obj = {
        //         text:i+1,
        //         value:i+1
        //     }
        //     this.columns.push(obj)
        // }
        // this.typeVal=this.columns[0].value
        this.getshoppingName()
    },
    methods:{
        GetQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        cancelMask(){
            this.showMask=false
            this.remarkVal=this.originalRemarkVal
        },
        showPopup(type){
            type==1?this.showMask=true:this.showActivity=true
            
        },
        goAddRemark(){
            let that=this
            let obj={id:this.storeList[this.storeIndex].id,remark:this.remarkVal}
            Toast.loading({
                message: '提交中...',
                forbidClick: true,
                overlay:true
            });
            this.$apiRequest.addRemark(obj).then(res=>{
                console.log('添加备注状态',res)
                Toast.clear();
                if(res.code==1){
                    Toast.success('添加成功')
                    that.showMask=false
                    that.storeList[that.storeIndex].remark=that.remarkVal
                    that.originalRemarkVal=that.remarkVal
                }else{
                    Toast(res.msg)
                }
            })
        },
        getshoppingName(){
            let obj={}
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            this.activityInfo={
                activity_time:'',
                self_activity_name:'',
                store_activity_name:'',
                sales_amount:''
            }
            console.log('999999',)
             this.$apiRequest.getshoppingName(obj).then(res=>{
                 console.log('商城',res)
                 if(res.code==1){
                     let data=res.data
                    //  res.data.storeList.map(i=>{
                    //     i.text=i.name
                    //     i.value=i.id
                    // })
                     this.shopMallInfo=data
                     let newArr=[]
                     if(data.storeList.length > 0){
                        data.storeList.map((i,v)=>{
                            let obj={
                                value:v,
                                remark:i.remark,
                                text:i.name,
                                id:i.id
                            }
                            newArr.push(obj)
                        })
                        
                     }
                    this.storeList=newArr
                    //  this.brandVal=data.storeList[0].id
                    //  console.log('this.brandVal',this.brandVal)
                     this.storeName=this.storeList[this.storeIndex].text
                    //  this.value=this.storeList[this.storeIndex].value
                     console.log('this.storeList',this.storeList)
                     let remark=data.storeList[this.storeIndex].remark
                     this.originalRemarkVal=remark
                     this.remarkVal=remark
                     this.getRankList()
                     this.getActiveInfo()
                 }else{
                    Toast(res.msg)
                 }
             })
        },
        getRankList(){
            let storeId=this.storeList[this.storeIndex].id
            let obj={month:this.month,store_id:storeId}
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            });
            console.log('obj-----------',obj)
            this.$apiRequest.getRankList(obj).then(res=>{
                console.log('商场排名',res)
                Toast.clear()
                if(res.code==1){
                    res.data.map(i=>{
                        // i.monthRank=''
                        i.data_month_ranking==''||i.data_month_ranking <= 0?i.isEditRank=true:i.isEditRank=false
                        i.performance==''||i.performance<=0?i.isEditPrice=true:i.isEditPrice=false
                        // i.year_round_ranking!==''||i.year_round_performance!==''?i.isAready=true:i.isAready=false
                        i.year_round_ranking==''||i.year_round_ranking=='0'||i.year_round_performance==''||i.year_round_performance=='0.00'?i.isAready=false:i.isAready=true
                    })
                    this.rankList=res.data
                }else{
                    Toast(res.msg)
                }
            })
        },
        changPrice(){
            //console.log('indexindex',index)
            this.isWeek=true
        },
        onConfirm(value, index) {
            // Toast(`当前值：${value}, 当前索引：${index}`);
            
            this.month=value
            this.isWeek=false
            this.getshoppingName()
        },
        onChange(picker, value, index) {
            // Toast(`当前值：${value}, 当前索引：${index}`);
        },
        onCancel() {
            // Toast('取消');
            this.isWeek=false
        },
        goCheck(){},
        goSave(arr){
            let storeId=this.storeList[this.storeIndex].id
            let obj={
                month:this.month,
                month_data:arr,
                store_id:storeId
            }
            Toast.loading({
                message: '提交中...',
                forbidClick: true,
                overlay:true
            });
            this.$apiRequest.onSavePrice(obj).then(res=>{
                console.log('提交状态',res)
                Toast.clear();
                if(res.code==1){
                    Toast.success('提交成功')
                    this.getRankList()
                }else{
                    Toast.fail('提交失败');
                }
            })
        },
        // goEdit(index,info){
        //     console.log('编辑',info)
        //     this.rankList[index].isEdit=true
        //     this.$forceUpdate()
        // },
        goEdit(){
            this.isEdit=!this.isEdit
            if(!this.isEdit){
                this.getRankList()
                return
            }
            
            if(this.isEdit){
                this.rankList.map(i=>{
                    i.isEditRank=true
                    i.isEditPrice=true
                })
                this.$forceUpdate()
            }
            
        },
        gosingleCheck(index,info){
            if(!info.can_write){//超过填写时间
                Toast('已超过填写时间')
                return
            }
            if(info.performance==''){
                Toast('请输入金额')
                return
            }
            let price=this.ismoney(info.performance)
            if(!price){
                Toast('请输入正确的金额格式')
                return
            }
            if(info.performance > 10000){
                Toast('金额过大')
                return
            }
            if(info.performance!==''){
                console.log('infoinfoinfo',info)
                let newArr=[{performance:info.performance,store_brand_id:info.store_brand_id,
                year_round_ranking:info.year_round_ranking,
                year_round_performance:info.year_round_performance}]
                this.goSave(newArr)
                this.rankList[index].isEdit=false
                this.$forceUpdate()
            }
        },
        changeName(){
            this.isName=true
        },
        onConfirmName(val,index){
            console.log(`当前值：${val}, 当前索引：${index}`)
            this.isName=false
            this.storeIndex=index
            this.getshoppingName()
        },
        onCancelName(){
            this.isName=false
        },
        onChangeName(){

        },
        ismoney(value){
            var mny = /^[0-9]*(\.[0-9]{1,2})?$/;
            return mny.test(value)
        },
        formatDate(date) {
            return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        },
        onActivityConfirm(date){//确认活动时间
            const [start, end] = date;
            // console.log('dataaaaaaa',date)
            this.activityInfo.activity_time = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            console.log('activeDate',this.activityInfo.activity_time)
            this.isShowTime=false
        },
        goChange(){
            if(this.isActivity){
                return
            }
            this.isShowTime=true
        },
        goEditActivity(){//修改
            this.isActivity=false
        },
        goCalcenAnnual(){
            this.getRankList()
        },
        getActiveInfo(){
            let obj={
                month:this.month,
                store_id:this.storeList[this.storeIndex].id
            }
            this.activityInfo={
                activity_time:'',
                self_activity_name:'',
                store_activity_name:'',
                sales_amount:''
            }
            this.$apiRequest.getActiveInfo(obj).then(res=>{
                console.log('获取活动内容',res)
                if(res.code==1&&res.data){
                    this.isActivity=true
                    this.activityInfo=res.data
                }
                if(!res.data){//没有填过
                    this.isActivity=false
                }
            })
        },
        //提交活动信息
        onSaveActive(){
            let that=this
            if(this.activityInfo.activity_time==''){
                Toast('请填写活动时间')
                return
            }
            // if(this.activityInfo.self_activity_name==''){
            //     Toast('请填写商场活动')
            //     return
            // }
            // if(this.activityInfo.store_activity_name==''){
            //     Toast('请填写自主活动')
            //     return
            // }
            if(this.activityInfo.sales_amount==''){
                // Toast('请填写销售金额')
                // return
            }else{
                if(this.activityInfo.sales_amount > 999){
                    Toast('请确认金额输入是否正确')
                    return
                }
                let price=this.ismoney(+this.activityInfo.sales_amount)
                console.log('price',price)
                if(!price){
                    Toast('请输入正确的金额格式')
                    return
                }
            }
            Dialog.confirm({
                title: '提示',
                message: '确定提交吗?',
            })
            .then(() => {
                that.saveActiveInfo()
            })
            .catch(() => {});
        },
        goCancel(){
            this.getActiveInfo()
        },
        saveActiveInfo(){
            let obj={
                month:this.month,
                store_id:this.storeList[this.storeIndex].id,
                activity_time:this.activityInfo.activity_time,
                self_activity_name:this.activityInfo.self_activity_name,
                store_activity_name:this.activityInfo.store_activity_name,
                sales_amount:this.activityInfo.sales_amount
            }
            console.log('提交data',obj)
            Toast.loading({
                message: '提交中...',
                forbidClick: true,
                overlay:true
            });
            this.$apiRequest.onSaveActive(obj).then(res=>{
                console.log('提交状态',res)
                if(res.code==1){
                    Toast.success('提交成功')
                    this.isActivity=true
                    this.showActivity=false
                }else{
                    Toast(res.msg)
                    // Toast('提交失败')
                }
            })
        },
        goSaveAnnual(info){
            console.log('infooooooo',info)
            let that=this
            Dialog.confirm({
                title: '提示',
                message: '确定提交吗?',
            })
            .then(() => {
                that.saveAnnual(info)
            })
            .catch(() => {});
        },
        goEditAnnual(info,index){
            this.rankList[index].isAready=false
            // let that=this
            // Dialog.confirm({
            //     title: '提示',
            //     message: '确定修改吗?',
            // })
            // .then(() => {
            //     that.saveAnnual(info)
            // })
            // .catch(() => {});
        },
        saveAnnual(info){
            let that=this
            let storeId=this.storeList[this.storeIndex].id
            // let styB={
            //     store_brand_id:info.store_brand_id,
            //     performance:info.performance,
            //     year_round_ranking:info.year_round_ranking,
            //     year_round_performance:info.year_round_performance
            // }
            let rankObj={}
            let newArr=[]
            this.rankList.map(i=>{
                rankObj={
                    store_brand_id:i.store_brand_id,
                    performance:i.performance,
                    year_round_ranking:i.year_round_ranking,
                    year_round_performance:i.year_round_performance,
                    data_month_ranking:i.data_month_ranking
                }
                newArr.push(rankObj)
            })
            
            let obj={
                month:this.month,
                // month_data:[styB],
                month_data:newArr,
                store_id:storeId
            }
            Toast.loading({
                message: '提交中...',
                forbidClick: true,
                overlay:true
            });
            console.log('提交--------',obj)
            this.$apiRequest.onSavePrice(obj).then(res=>{
                console.log('提交状态',res)
                if(res.code==1){
                    Toast.success('提交成功')
                    this.isActivity=true
                    this.isEdit=false
                    setTimeout(function(){
                        that.getRankList()
                    },2000)
                }else{
                    Toast(res.msg)
                    // Toast('提交失败')
                }
            })
        },
        getStoreIndex(e){
            console.log('eeeeee',e)
            this.storeIndex=e
            this.isEdit=false
            this.getRankList()
            this.getActiveInfo()
            this.getshoppingName()
        },
        getMonthIndex(e){
            this.month=e+1
            this.monthIndex=e
            this.isEdit=false
            this.getRankList()
            this.getActiveInfo()
        },
        goClose(){
            this.showActivity=false
        },
        goSubmit(){
            let that=this
            console.log('rankList',this.rankList)
            let regPos = /^[0-9]+.?[0-9]*/;
            let newArr=[]
            let newLen=[]
            let newPrice=[]
            let newNumber=[]
            let rankArr=[]
            this.rankList.map(i=>{
                // console.log('iiiiiiiiii',i)
                if(i.performance!==''){
                    let isPrice=this.ismoney(i.performance)//校验金额
                    // console.log('isPrice',isPrice)
                    isPrice?i.isPrice=true:i.isPrice=false
                    if(!isPrice){
                        newArr.push(isPrice)
                    }
                    if(i.performance > 9999){
                        newPrice.push(i.performance)
                    }
                    if(!regPos.test(i.performance)){
                        newNumber.push(i)
                    }
                    
                }else{
                    newLen.push(i.performance)
                }   

                if(i.data_month_ranking!==''){
                    if(i.data_month_ranking < 0 ){
                        rankArr.push(i)
                    }
                }
            })
            if(rankArr.length>0){
                Toast('本月排名不能为负数')
                return
            }
            if(newLen.length===this.rankList.length){
                Toast('金额至少填写一处再提交')
                return
            }
            if(newNumber.length>0){
                Toast('仅限输入数字')
                return
            }
            if(newArr.length>0){//输入正确
                Toast('输入的金额格式有误')
                return
            }
            if(newPrice.length > 0){
                Toast('填写金额过大,请注意单位')
                return
            }
             Dialog.confirm({
                title: '提示',
                message: '确定提交嘛?',
            })
            .then(() => {
                // that.saveAnnual(info)
                that.saveAnnual()
            })
            .catch(() => {});
        }
    }
}
</script> 
<style lang='less'>
.navInfo{
    position: sticky;
    top: 0;
    z-index: 999;
    // .van-dropdown-menu__bar{
    //     border-radius: 0.1rem;
    // }
    .van-dropdown-item{
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 768px;
    }
}
</style>
<style lang='less' scoped>
.van-popup--center{
    padding: 0.4rem;
}

.addRemark{
    margin-top: 0.5rem;
}
.navInfo{
    // padding: 0.2rem 0 0 0;
    // width: 92%;
    // margin: 0 auto;
}
.contentInfo{
    width:92%;margin:0.4rem auto;border-radius:0.2rem;
    .title{
        // background-color: rgba(83,114,192,.6);
        background-color: #9da9d8;
        position: sticky;
        top: 0.96rem;
        z-index: 9;
    }
}
textarea{border:none;border: 1px #ccc solid;}
.wrapper{
    // background-color: #f1f1f1;
    background-color:rgba(72, 115, 193, 0.1);
    padding-bottom: 1.6rem;
}
.annualInfo{
    padding: 0.2rem 0.2rem 0 0.2rem;
    border-radius: 0.1rem;
    input{
        background-color: #f1f1f1;
        border-bottom:0.01rem #999 solid !important;
    }
}
.annualContent{
    .sameBtnSty{
        padding: 0.1rem 0.4rem;
        border-radius: 0.2rem;
    }
    .calBtn{
        border:1px #ddd solid;
        
    }
    .saveAbtn{
        border: 1px #aaa solid;
    }
}
.title{
    // background-color: rgba(83,114,192,0.4);
    padding: 0.2rem 3%;
    border-radius: 0.2rem 0.2rem 0 0;
    // background-color: #4873c1
}
.arrowSty{
    display: block;
    width: 0;
    height: 0;
    border:0.12rem solid transparent;
    // border-top-color: #4873c1;
    border-top-color: #fff;
    position: relative;
    top: 0.06rem;
    margin-left: 0.06rem;
}
.dw{
    position: absolute;
    right: 0.1rem;
    bottom: 0.1rem;
    color: #f1f1f1;
}
.changeContent{
    color: rgb(72, 115, 193);
    background-color: rgba(175,186,216,0.4);
    padding: 0.1rem 0;
    
}
.listContent{
    // max-height: 7rem;
    overflow-y: scroll;
    padding-bottom: 0.2rem;
}
.list{
    width: 100%;
    padding: 0.24rem;
    border-bottom: 1px #eee solid;
    .tagSty{
        top:-2px;
        left: 0;
        .num{
            position: relative;
            right: 0.33rem;
            top: 0.05rem;
        }
        img{
            width: 0.45rem;
            height: 0.45rem;
        }
    }
    input{
        border: 1px #eee solid;
        width: 1.4rem;
        padding: 0.1rem;
        box-shadow: none;
        -webkit-appearance:none
    }
    input::-webkit-input-placeholder{
        color: #ccc;
        font-size: 0.26rem;
    }
    .content{
        img{
            width: 0.42rem;
            height: 0.42rem;
        }
    }
    &:last-child{
        border-bottom:0
    }
}
.footer{
    position: fixed;
    bottom: 0; 
    width: 100%;
    background-color: rgba(83,114,192,0.1);
    padding: 0.2rem 0;
    .btmSty{
        width: 90%;
        margin: 0 auto;
        .saveBtn{
            background-color: #4873c1;
            color: #fff;
            padding: 0.2rem 1rem;
            border-radius: 0.4rem;
        }
    }
}
.tipsTxt{
    padding: 0.2rem 0.46rem;
}

.onSameBtn{
    width: 1.4rem;
    height: 0.6rem;
    line-height: 0.6rem;
    border:1px #ddd solid;
    border-radius: 0.4rem;
}
.onSaveBox{
    border:1px #4873c1 solid;
}
.grayBg{
    background-color: #f1f1f1;
}
.operateLayout{
    width: 74%;
    margin: 0 auto;
    position: fixed;
    bottom: 0.3rem;
    left: 50%;
    max-width: 768px;
    transform: translate(-50%,-50%);
    .sameBtn{
        border:1px #ddd solid;
        padding: 0.18rem 0.8rem;
        border-radius: 0.4rem;
    }
    .saveBtn{
        background-color: #4873c1;
    }
}
.otherBtn{
    position: fixed;
    right: 0.1rem;
    top: 40%;
    .circleSty{
        width: 1rem;
        height: 1rem;
        // line-height: 1rem;
        border-radius: 50%;
        // background-color: #fff;
        background-color: rgba(0,0,0,0.1);
    }
    img{
        // display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
    }
}
.closeIcon{
    width: 0.4rem;
    position: absolute;
    right: -0.4rem;
    top: -0.3rem;
}
</style>